<template>
  <view class="smart-container">
    <!-- 1. 容器类组件 -->
    <view class="smart-panel-title">1.容器</view>
    <view class="smart-panel-h" @click="goDetailPage('view')">
      <text>view视图</text>
    </view>
    <view class="smart-panel-h" @click="goDetailPage('scroll-view')">
      <text>scroll-view滚动视图</text>
    </view>
    <view class="smart-panel-h" @click="goDetailPage('swipter')">
      <text>swiper可滚动视图（轮播）</text>
    </view>

    <!-- 2. 基础内容类组件 -->
    <view class="smart-panel-title">2.基础内容</view>
    <view class="smart-panel-h" @click="goDetailPage('text')">
      <text>text文本组件</text>
    </view>
    <view class="smart-panel-h" @click="goDetailPage('rich-text')">
      <text>rich-text富文本组件</text>
    </view>
    <view class="smart-panel-h" @click="goDetailPage('progress')">
      <text>progress进度条</text>
    </view>

    <!-- 3. 表单类组件 -->
    <view class="smart-panel-title">3.表单组件</view>
    <view class="smart-panel-h" @click="goDetailPage('button')">
      <text>button按钮</text>
    </view>
    <view class="smart-panel-h" @click="goDetailPage('radio')">
      <text>radio单选框</text>
    </view>
    <view class="smart-panel-h" @click="goDetailPage('checkbox')">
      <text>checkbox多选框</text>
    </view>
    <view class="smart-panel-h" @click="goDetailPage('input')">
      <text>input输入控件</text>
    </view>
    <view class="smart-panel-h" @click="goDetailPage('picker')">
      <text>picker选择列表</text>
    </view>
    <view class="smart-panel-h" @click="goDetailPage('slider')">
      <text>slider滑块</text>
    </view>
    <view class="smart-panel-h" @click="goDetailPage('switch')">
      <text>switch开关</text>
    </view>
    <view class="smart-panel-h" @click="goDetailPage('textarea')">
      <text>textarea多行文本输入框</text>
    </view>
    <view class="smart-panel-h" @click="goDetailPage('form')">
      <text>form表单容器</text>
    </view>
    
    <!-- 4.导航组件 -->
    <view class="smart-panel-title">4.导航组件</view>
    <view class="smart-panel-h" @click="goDetailPage('navigator')">
      <text>navigator</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      
    }
  },
  methods: {
    goDetailPage(e) {
      if (typeof e === 'string') {
        uni.navigateTo({
          url: '/pages/tabBar/component/' + e + '/' + e
        });
      } else {
        uni.navigateTo({
          url: e.url
        });
      }
    }
  }
}
</script>